<template>
  <view class="goods-detail">
    <div
      class="back-btn"
      @click="back"
      v-bind:style="{ position: 'fixed', top: btnTop + 'px' }"
    >
      <uni-icons size="28" type="back"></uni-icons>
    </div>
    <div class="header-img">
      <swiper
        class="swiper"
        :indicator-dots="indicatorDots"
        :duration="duration"
      >
        <swiper-item v-for="(item, index) in goodsData.item_img" :key="index">
          <!-- <img src=""class="swiper-item uni-bg-red"></img> -->
          <image class="img" :src="item" alt="" />
        </swiper-item>
        <!-- <swiper-item>
          <view class="swiper-item uni-bg-green">B</view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item uni-bg-blue">C</view>
        </swiper-item> -->
      </swiper>
    </div>
    <div class="header-money">
      <div>
        <div>
          <text class="iconfont icon-jiage"></text>{{ goodsData.price }}
        </div>
        <!-- <div>去支付</div> -->
      </div>
    </div>
    <div class="middle-title">
      <div class="title">
        <div>
          {{ goodsData.title }}
        </div>
        <!-- <div>去支付</div> -->
      </div>
      <div class="cart">
        <div>
          <button @click="cartTo()" plain="true">加入购物车</button>
        </div>
      </div>
    </div>
    <div class="middle-detail">
      <div>
        <div class="info">规格信息</div>
        <div class="from-wrapper">
          <div class="from">
            <div class="left">产地</div>
            <div class="right">{{ goodsData.place }}</div>
          </div>
          <div class="from">
            <div class="left">规格</div>
            <div class="right">{{ goodsData.guige }}</div>
          </div>
          <div class="from">
            <div class="left">保质期</div>
            <div class="right">{{ goodsData.shelf_life }}</div>
          </div>
          <div class="from">
            <div class="left">储藏方式</div>
            <div class="right">{{ goodsData.how_save }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="middle-tuwen">
      <div>
        <div class="info">图文介绍</div>
      </div>
      <div>
        <div
          class="tuwen"
          v-for="(tuwen, index) in goodsData.tuwen_img"
          :key="index"
        >
          <image class="img" mode="widthFix" :src="tuwen" alt="" />
        </div>
      </div>
    </div>
    <div class="foot">
      <!-- <div class="foot-ding" @click="myOrderTo">
        <div>
          <div><text class="iconfont icon-dingdan icon"></text></div>
          <div>订单</div>
        </div>
      </div> -->
      <div class="foot-cart" @click="myCartTo">
        <div class="foot-cart-wrapper">
          <div class="icon-brage" v-show="cartNums > 0">
            <div>{{ cartNums }}</div>
          </div>
          <div><uni-icons type="cart" size="18"></uni-icons></div>
          <div>购物车</div>
        </div>
      </div>
      <div class="foot-pay" @click="myCartTo">
        <!-- <div><text class="iconfont icon-jiage"></text>3.99</div> -->
        <div>去支付</div>
      </div>
    </div>
  </view>
</template>

<script>
import uniIcons from "../../../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
export default {
  components: { uniIcons },
  data() {
    return {
      show: true,
      btnTop: 0, //获取css高度
      indicatorDots: true, //显示面板指示点
      duration: 500, //滑动动画市场
      sId: "",
      goodsData: {},
      openid: "",
      cartNums: 0,
      price: "",
    };
  },
  onLoad(option) {
    this.sId = decodeURIComponent(option.s_id);
    console.log(this.sId);
    this.requestData();
  },
  onShow() {
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); //获取右上角分享栏信息
    this.btnTop = menuButtonInfo.top;
    let that = this;
    uni.getStorage({
      key: "openid",
      success: function (res) {
        console.log(res);
        that.openid = res.data;
        that.cartNum();
      },
    });
    // console.log(this.btnTop);
  },

  methods: {
    requestData() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      this.$MyRequest({
        url: "/cart-detail",
        data: {
          sId: this.sId,
        },
      }).then((res) => {
        console.log(res.data);

        let showData = res.data.data.map((s) => {
          s.item_img = JSON.parse(s.item_img);
          s.tuwen_img = JSON.parse(s.tuwen_img);
          return s;
        });
        this.goodsData = showData[0];
        uni.hideLoading();
        // this.showData = this.showData.sort((a, b) => {
        //   return a.time < b.time ? 1 : -1;
        // });
        // console.log(data);
        // this.questionFrom = JSON.parse(optionData);
        // console.log(optionData);
      });
    },
    //购物车数量
    cartNum() {
      this.$MyRequest({
        url: "/cart_my_num",
        method: "POST",
        data: {
          openid: this.openid,
        },
      }).then((res) => {
        this.cartNums = res.data.data;
      });
    },
    back() {
      uni.navigateBack({ delta: 1 });
    },
    //加入购物车
    cartTo() {
      this.$MyRequest({
        url: "/set_cart_one",
        method: "POST",
        data: {
          sId: this.goodsData.s_id,
          openid: this.openid,
          img: this.goodsData.item_img[0],
        },
      }).then((res) => {
        console.log(res.data);
        uni.showToast({
          title: "添加成功",
          duration: 1000,
        });
        this.cartNum();
      });

      // uni.showLoading({
      //   title: "加载中",
      // });
    },
    myCartTo() {
      uni.navigateTo({ url: "/pages/home/service/GroupBuying/MyCart" });
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.goods-detail {
  background-color: $uni-color-indexBg;
  height: 100vh;
  .back-btn {
    border-radius: 50%;
    background-color: rgba(209, 208, 208, 0.616);
    width: 60rpx;
    height: 60rpx;
    position: fixed;
    z-index: 500;
    left: 15rpx;
    @include center;
  }
  .header-img {
    .swiper {
      height: 500rpx;
    }
    .img {
      width: 100%;
      height: 100%;
    }
  }
  .header-money {
    height: 90rpx;
    background-color: $uni-color-cart;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #fff;
    font-size: 52rpx;
    padding-right: 15rpx;
  }
  .middle-title {
    padding: 0 20rpx;
    box-sizing: border-box;
    // display: flex;
    // align-items: center;
    // height: 90rpx;
    background-color: #fff;
    color: #000;
    font-weight: bold;
    font-size: 26rpx;
    .title {
      padding: 20rpx 0;
    }
    .cart {
      // padding-left: 135rpx;
      display: flex;
      justify-content: flex-end;
      padding-bottom: 20rpx;
      button {
        border-radius: 15rpx;
        font-size: 25rpx;
        color: rgb(255, 255, 255);
        width: 200rpx;
        letter-spacing: 1px;
        // size: 10;
        height: 55rpx;
        @include center;
        background-color: $uni-color-cart;
        border: none;
      }
    }
  }
  .middle-detail {
    padding: 0 20rpx;
    margin-top: 15rpx;
    background-color: #fff;
    box-sizing: border-box;
    .info {
      color: rgb(0, 0, 0);
      font-size: 35rpx;
      font-weight: bold;
      padding-top: 20rpx;
    }
    .from-wrapper {
      padding: 20rpx 0;
      .from {
        display: flex;
        font-size: 28rpx;
        color: #000;
        .left {
          flex: 0 0 20%;
          background-color: rgb(226, 231, 231);
          margin-bottom: 5rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          padding-left: 15rpx;
        }
        .right {
          flex: 1;
          background-color: rgb(233, 229, 229);
          margin-bottom: 5rpx;
          padding-left: 15rpx;
          margin-left: 5rpx;
          display: flex;
          align-items: center;
          padding-left: 15rpx;
        }
      }
    }
  }
  .middle-tuwen {
    padding: 0 20rpx;
    margin-top: 15rpx;
    background-color: #fff;
    box-sizing: border-box;
    padding-bottom: 95rpx;
    .info {
      color: rgb(0, 0, 0);
      font-size: 35rpx;
      font-weight: bold;
      padding: 20rpx 0;
    }
    .tuwen {
      width: 100%;
      .img {
        width: 100%;
        // height: 100%;
      }
    }
  }
  .foot {
    width: 100%;
    // height: 70px;
    position: fixed;
    z-index: 500;
    bottom: 0;
    display: flex;
    // align-items: center;
    height: 90rpx;
    background-color: #fff;
    border-top: 1px solid rgb(233, 231, 231);
    // .foot-ding {
    //   @include center;
    //   text-align: center;
    //   // vertical-align: middle;
    //   flex: 0 0 120rpx;
    //   background-color: #fff;
    //   font-size: 27rpx;
    // }
    .foot-cart {
      @include center;
      font-size: 27rpx;
      text-align: center;
      flex: 0 0 120rpx;
      background-color: #fff;
      .foot-cart-wrapper {
        position: relative;
        .icon-brage {
          position: absolute;
          border-radius: 50%;
          width: 35rpx;
          height: 35rpx;
          background-color: $uni-color-cart;
          top: -7rpx;
          left: 50rpx;
          @include center;
          color: #fff;
          font-size: 20rpx;
          font-weight: bold;
        }
      }
    }

    .foot-pay {
      text-align: center;
      @include center;

      font-size: 35rpx;
      flex: 1;
      background-color: $uni-color-cart;
      color: #fff;
    }
    .icon {
      font-size: 37rpx;
    }
  }
}
</style>
